<template>
  <div class="w-[70%] mx-auto py-4 px-5" id="div-1">
    <a-typography-link href="#" id="a-typography-link-2">
      <a-typography-title :level="1" class="!text-[#212121] text-center" id="a-typography-title-3"
        >习近平同志关心推动民营经济发展纪实</a-typography-title
      >
    </a-typography-link>
    <a-flex justify="center" :gap="20" id="a-flex-4">
      <a-typography-link
        href="#"
        v-for="(item, index) in list"
        :key="index"
        class="!text-[#666] text-center"
        :id="`a-typography-link-5-${index}`"
      >
        【{{ item }}】
      </a-typography-link>
    </a-flex>
    <a-row class="!mx-0 my-4" :gutter="30" id="a-row-6">
      <a-col :span="8" class="!pl-0" id="a-col-7">
        <a-typography-link href="#" class="flex flex-col relative" id="a-typography-link-8">
          <a-image src="https://picsum.photos/id/12/1000/800" class="aspect-[2/1]" :preview="false" id="a-image-9" />
          <a-flex class="absolute inset-x-0 bottom-0 bg-gradient-to-b from-black/0 to-black/60 px-2" align="center" id="a-flex-10">
            <a-typography-paragraph class="text-lg text-white py-1 !mb-0 line-clamp-1 flex-1" id="a-typography-paragraph-11">
              习近平同志关心推动民营经济发展纪实
            </a-typography-paragraph>
            <a-flex :gap="5" id="a-flex-12">
              <a-typography-link
                href="#"
                class="h-3 w-3 rounded-full bg-white/50"
                v-for="index in nTopPages"
                :key="index"
                :class="{
                  '!bg-[white]': index === currentTopPage,
                }"
                :id="`a-typography-link-13-${index}`"
              />
            </a-flex>
          </a-flex>
          <a-typography-link href="#" class="absolute left-2 top-1/2 -translate-y-1/2" id="a-typography-link-14">
            <LeftOutlined class="text-black/30 text-3xl" id="leftoutlined-15" />
          </a-typography-link>
          <a-typography-link href="#" class="absolute right-2 top-1/2 -translate-y-1/2" id="a-typography-link-16">
            <RightOutlined class="text-black/30 text-3xl" id="rightoutlined-17" />
          </a-typography-link>
        </a-typography-link>
        <a-flex align="center" class="pl-4 relative mt-4 mb-3" justify="space-between" id="a-flex-18">
          <a-divider type="vertical" class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-2/3" id="a-divider-19" />
          <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" id="a-typography-link-20"> 焦点关注 </a-typography-link>
        </a-flex>
        <a-flex vertical :gap="10" id="a-flex-21">
          <a-typography-link
            href="#"
            v-for="(item, index) in list1"
            :key="index"
            class="text-lg !text-[#333] line-clamp-1"
            :id="`a-typography-link-22-${index}`"
          >
            {{ item }}
          </a-typography-link>
        </a-flex>
      </a-col>
      <a-col :span="8" class="flex flex-col" id="a-col-23">
        <a-flex vertical justify="space-between" class="flex-1" id="a-flex-24">
          <a-typography-link
            href="#"
            v-for="(item, index) in list2"
            :key="index"
            class="text-xl !text-[#333] line-clamp-1"
            :class="{
              'text-[#212121_!important] font-bold !text-2xl': index === 0 || index === 6,
            }"
            :id="`a-typography-link-25-${index}`"
          >
            {{ item }}
          </a-typography-link>
        </a-flex>
      </a-col>
      <a-col :span="8" class="!pr-0" id="a-col-26">
        <a-flex align="center" class="pl-4 relative mb-4" justify="space-between" id="a-flex-27">
          <a-divider type="vertical" class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-2/3" id="a-divider-28" />
          <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" id="a-typography-link-29"> 能源评论 </a-typography-link>
        </a-flex>
        <a-timeline id="a-timeline-30">
          <a-timeline-item
            v-for="(item, index) in list3"
            :key="index"
            color="#F33030"
            :class="{
              '!pb-3': index !== list3.length - 1,
              '!pb-0': index === list3.length - 1,
            }"
            :id="`a-timeline-item-31-${index}`"
          >
            <a-typography-link href="#" class="line-clamp-1 !text-[#333] text-xl" :id="`a-typography-link-32-${index}`">{{
              item
            }}</a-typography-link>
          </a-timeline-item>
        </a-timeline>
        <a-flex vertical class="-translate-y-5" id="a-flex-33">
          <a-typography-link href="#" class="flex flex-1" id="a-typography-link-34">
            <a-image src="https://picsum.photos/id/14/1000/800" :preview="false" class="aspect-[5/1]" id="a-image-35" />
          </a-typography-link>
          <a-flex align="center" class="pl-4 relative mt-3 mb-4" justify="space-between" id="a-flex-36">
            <a-divider
              type="vertical"
              class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-2/3"
              id="a-divider-37"
            />
            <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" id="a-typography-link-38"> 能源党建 </a-typography-link>
          </a-flex>
          <a-timeline class id="a-timeline-39">
            <a-timeline-item
              v-for="(item, index) in list4"
              :key="index"
              color="#F33030"
              :class="{
                '!pb-3': index !== list4.length - 1,
                '!pb-0': index === list4.length - 1,
                '!absolute': index === list4.length - 1,
              }"
              :id="`a-timeline-item-40-${index}`"
            >
              <a-typography-link href="#" class="line-clamp-1 !text-[#333] text-xl" :id="`a-typography-link-41-${index}`">{{
                item
              }}</a-typography-link>
            </a-timeline-item>
          </a-timeline>
        </a-flex>
      </a-col>
    </a-row>
    <a-flex id="a-flex-44">
      <a-typography-link href="#" class="relative !text-[#c3000b] text-2xl px-1 font-bold pb-2" id="a-typography-link-45">
        热点专题
        <a-divider class="border-4 border-[#c3000b] absolute -bottom-0.5 inset-x-0 my-0" id="a-divider-46" />
      </a-typography-link>
    </a-flex>
    <a-divider class="border-[#c3000b] my-0" id="a-divider-47" />
    <a-flex class="my-8" align="center" :gap="30" id="a-flex-48">
      <a-typography-link href="#" id="a-typography-link-49">
        <LeftOutlined class="text-[#c3000b] text-4xl" id="leftoutlined-50" />
      </a-typography-link>
      <a-flex :gap="15" class="flex-1" id="a-flex-51">
        <a-typography-link href="#" v-for="(item, index) in list5" :key="index" class="flex flex-col" :id="`a-typography-link-52-${index}`">
          <a-image :src="item" :preview="false" class="rounded-md aspect-[7/4]" :id="`a-image-53-${index}`" />
        </a-typography-link>
      </a-flex>
      <a-typography-link href="#" id="a-typography-link-54">
        <RightOutlined class="text-[#c3000b] text-4xl" id="rightoutlined-55" />
      </a-typography-link>
    </a-flex>

    <a-flex justify="space-between" align="center" id="a-flex-56">
      <a-typography-link href="#" class="relative !text-[#c3000b] text-2xl px-1 font-bold pb-2" id="a-typography-link-57">
        能源宏观
        <a-divider class="border-4 border-[#c3000b] absolute -bottom-0.5 inset-x-0 my-0" id="a-divider-58" />
      </a-typography-link>
      <a-typography-link href="#" class="relative !text-[#c3000b] bg-[#eee] h-fit rounded-full px-4 text-lg" id="a-typography-link-59">
        能源安全
      </a-typography-link>
    </a-flex>
    <a-divider class="border-[#c3000b] my-0" id="a-divider-60" />
    <a-row :gutter="30" class="my-6 !mx-0" id="a-row-61">
      <a-col :span="16" class="!pl-0" id="a-col-62">
        <a-flex align="center" class="pl-6 relative mb-4 bg-[#eee]" justify="space-between" id="a-flex-63">
          <a-divider type="vertical" class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-full" id="a-divider-64" />
          <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" id="a-typography-link-65"> 能源评论 </a-typography-link>
        </a-flex>
        <a-typography-link href="#" id="a-typography-link-66">
          <a-typography-title :level="4" class="text-center" id="a-typography-title-67">
            “我是一贯支持民营企业的” ——习近平同志关心推动民营经济发展纪实
          </a-typography-title>
          <a-typography-paragraph class="!mb-0 text-[#666] indent-5 text-lg" id="a-typography-paragraph-68">
            民营经济，推进中国式现代化的生力军，实现高质量发展的重要基础。长期在地方工作，尤其是在民营经济比较发达省份工作，一路走来，习近平同志一直十分重视支持民营经济健康发展、关心民营企业家健康成长。
          </a-typography-paragraph>
        </a-typography-link>
        <a-flex class="grid grid-cols-2 gap-x-2 my-3 gap-y-2" id="a-flex-69">
          <a-typography-link
            href="#"
            v-for="(item, index) in list6"
            :key="index"
            class="line-clamp-1 !text-[#212121] text-lg"
            :id="`a-typography-link-70-${index}`"
          >
            {{ item }}
          </a-typography-link>
        </a-flex>
      </a-col>
      <a-col
        :span="8"
        v-for="(item, index) in list7"
        :key="index"
        :class="{
          '!pr-0': index === list7.length - 1,
          '!pl-0': 1,
        }"
        :id="`a-col-71-${index}`"
      >
        <a-flex align="center" class="pl-6 relative mb-4 bg-[#eee]" justify="space-between" :id="`a-flex-72-${index}`">
          <a-divider
            type="vertical"
            class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-full"
            :id="`a-divider-73-${index}`"
          />
          <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" :id="`a-typography-link-74-${index}`">
            {{ item.title }}
          </a-typography-link>
        </a-flex>
        <a-flex vertical :gap="8" class="mb-8" :id="`a-flex-75-${index}`">
          <a-typography-link href="#" v-for="(item1, index1) in item.list" :key="index1" :id="`a-typography-link-76-${index}-${index1}`">
            <a-typography-text
              v-if="!item1.img"
              class="!text-[#212121] text-lg line-clamp-1"
              :id="`a-typography-text-77-${index}-${index1}`"
              >{{ item1.title }}</a-typography-text
            >
            <a-flex v-else :gap="20" :id="`a-flex-78-${index}-${index1}`">
              <a-typography-link href="#" vertical class="w-2/5" :id="`a-typography-link-79-${index}-${index1}`">
                <a-image :src="item1.img" :preview="false" class="aspect-[3/2]" :id="`a-image-80-${index}-${index1}`" />
              </a-typography-link>
              <a-flex vertical class="flex-1" :id="`a-flex-81-${index}-${index1}`">
                <a-typography-title :level="5" class="line-clamp-1" :id="`a-typography-title-82-${index}-${index1}`">{{
                  item1.title
                }}</a-typography-title>
                <a-typography-paragraph class="line-clamp-3 text-[#666] text-lg" :id="`a-typography-paragraph-83-${index}-${index1}`">{{
                  item1.desc
                }}</a-typography-paragraph>
              </a-flex>
            </a-flex>
          </a-typography-link>
        </a-flex>
      </a-col>
    </a-row>
    <a-flex justify="space-between" align="center" id="a-flex-86">
      <a-typography-link href="#" class="relative !text-[#c3000b] text-2xl px-1 font-bold pb-2" id="a-typography-link-87">
        能源产业
        <a-divider class="border-4 border-[#c3000b] absolute -bottom-0.5 inset-x-0 my-0" id="a-divider-88" />
      </a-typography-link>

      <a-flex :gap="15" id="a-flex-89">
        <a-typography-link
          href="#"
          class="relative !text-[#c3000b] bg-[#eee] h-fit rounded-full px-4 text-lg"
          v-for="(item, index) in list8"
          :key="index"
          :id="`a-typography-link-90-${index}`"
        >
          {{ item }}
        </a-typography-link>
      </a-flex>
    </a-flex>
    <a-divider class="border-[#c3000b] my-0" id="a-divider-91" />
    <a-row class="!mx-0 mt-4" :gutter="30" id="a-row-92">
      <a-col :span="8" class="!pl-0" id="a-col-93">
        <a-flex align="center" class="pl-6 relative mb-4" justify="space-between" id="a-flex-94">
          <a-divider type="vertical" class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-2/3" id="a-divider-95" />
          <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" id="a-typography-link-96"> 产业聚焦 </a-typography-link>
        </a-flex>
        <a-flex vertical :gap="8" class="mb-8" id="a-flex-97">
          <a-typography-link href="#" v-for="(item, index) in list9" :key="index" :id="`a-typography-link-98-${index}`">
            <a-typography-text v-if="!item.img" class="!text-[#212121] text-lg line-clamp-1" :id="`a-typography-text-99-${index}`">{{
              item.title
            }}</a-typography-text>
            <a-flex v-else :gap="20" :id="`a-flex-100-${index}`">
              <a-typography-link href="#" vertical class="w-2/5" :id="`a-typography-link-101-${index}`">
                <a-image :src="item.img" :preview="false" class="aspect-[3/2]" :id="`a-image-102-${index}`" />
              </a-typography-link>
              <a-flex vertical class="flex-1" :id="`a-flex-103-${index}`">
                <a-typography-title :level="5" class="line-clamp-1" :id="`a-typography-title-104-${index}`">{{
                  item.title
                }}</a-typography-title>
                <a-typography-paragraph class="line-clamp-3 text-[#666] text-lg" :id="`a-typography-paragraph-105-${index}`">{{
                  item.desc
                }}</a-typography-paragraph>
              </a-flex>
            </a-flex>
          </a-typography-link>
        </a-flex>
      </a-col>
      <a-col :span="8" id="a-col-106">
        <a-flex vertical v-for="(item, index) in list10" :key="index" :id="`a-flex-107-${index}`">
          <a-flex align="center" class="pl-6 relative mb-2" justify="space-between" :id="`a-flex-108-${index}`">
            <a-divider
              type="vertical"
              class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-2/3"
              :id="`a-divider-109-${index}`"
            />
            <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" :id="`a-typography-link-110-${index}`">
              {{ item.title }}
            </a-typography-link>
          </a-flex>
          <a-flex vertical :gap="5" class="mb-2" :id="`a-flex-111-${index}`">
            <a-typography-link
              href="#"
              class="line-clamp-1 !text-[#333] text-lg"
              v-for="(item1, index1) in item.list"
              :key="index1"
              :id="`a-typography-link-112-${index}-${index1}`"
            >
              <a-badge color="#eaeaea" :id="`a-badge-113-${index}-${index1}`" />
              {{ item1 }}
            </a-typography-link>
          </a-flex>
        </a-flex>
      </a-col>
      <a-col :span="8" class="!pr-0" id="a-col-114">
        <a-flex align="center" class="pl-6 relative mb-2" justify="space-between" id="a-flex-115">
          <a-divider type="vertical" class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-2/3" id="a-divider-116" />
          <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" id="a-typography-link-117"> 矿产·金属 </a-typography-link>
        </a-flex>
        <a-flex vertical :gap="8" id="a-flex-118">
          <a-typography-link
            href="#"
            v-for="(item, index) in list11"
            :key="index"
            class="!text-[#212121] text-lg line-clamp-1"
            :id="`a-typography-link-119-${index}`"
          >
            {{ item }}
          </a-typography-link>
        </a-flex>
        <a-typography-link href="#" class="flex flex-col my-3" id="a-typography-link-120">
          <a-image src="https://picsum.photos/id/20/1000/800" :preview="false" class="aspect-[5/1]" id="a-image-121" />
        </a-typography-link>
        <a-flex align="center" class="pl-6 relative mb-2" justify="space-between" id="a-flex-122">
          <a-divider type="vertical" class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-2/3" id="a-divider-123" />
          <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" id="a-typography-link-124"> 化工 </a-typography-link>
        </a-flex>
        <a-flex vertical :gap="8" id="a-flex-125">
          <a-typography-link
            href="#"
            v-for="(item, index) in list12"
            :key="index"
            class="!text-[#212121] text-lg line-clamp-1"
            :id="`a-typography-link-126-${index}`"
          >
            {{ item }}
          </a-typography-link>
        </a-flex>
      </a-col>
      <a-col :span="16" class="!pl-0" id="a-col-128">
        <a-typography-link href="#" class="flex flex-col" id="a-typography-link-129">
          <a-image src="https://picsum.photos/id/35/1000/800" class="aspect-[10/1]" :preview="false" id="a-image-130" />
        </a-typography-link>
      </a-col>
      <a-col :span="8" class="!pr-0" id="a-col-131">
        <a-typography-link href="#" class="flex flex-col" id="a-typography-link-132">
          <a-image src="https://picsum.photos/id/36/1000/800" class="aspect-[5/1]" :preview="false" id="a-image-133" />
        </a-typography-link>
      </a-col>
    </a-row>
    <a-flex justify="space-between" align="center" class="mt-6" id="a-flex-134">
      <a-typography-link href="#" class="relative !text-[#c3000b] text-2xl px-1 font-bold pb-2" id="a-typography-link-135">
        能源财经
        <a-divider class="border-4 border-[#c3000b] absolute -bottom-0.5 inset-x-0 my-0" id="a-divider-136" />
      </a-typography-link>
    </a-flex>
    <a-divider class="border-[#c3000b] my-0" id="a-divider-137" />
    <a-row class="!mx-0 my-6" :gutter="30" id="a-row-138">
      <a-col
        :span="8"
        v-for="(item, index) in list13"
        :key="index"
        :class="{
          '!pl-0': index % 3 === 0,
        }"
        :id="`a-col-139-${index}`"
      >
        <a-flex align="center" class="pl-6 relative mb-4 bg-[#eee]" justify="space-between" :id="`a-flex-140-${index}`">
          <a-divider
            type="vertical"
            class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-full"
            :id="`a-divider-141-${index}`"
          />
          <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" :id="`a-typography-link-142-${index}`">
            {{ item.title }}
          </a-typography-link>
        </a-flex>
        <a-flex vertical :gap="10" class="mb-8" :id="`a-flex-143-${index}`">
          <a-typography-link href="#" v-for="(item1, index1) in item.list" :key="index1" :id="`a-typography-link-144-${index}-${index1}`">
            <a-typography-text
              v-if="!item1.img"
              class="!text-[#212121] text-lg line-clamp-1"
              :id="`a-typography-text-145-${index}-${index1}`"
              >{{ item1.title }}</a-typography-text
            >
            <a-flex v-else :gap="20" :id="`a-flex-146-${index}-${index1}`">
              <a-typography-link href="#" vertical class="w-2/5" :id="`a-typography-link-147-${index}-${index1}`">
                <a-image :src="item1.img" :preview="false" class="aspect-[3/2]" :id="`a-image-148-${index}-${index1}`" />
              </a-typography-link>
              <a-flex vertical class="flex-1" :id="`a-flex-149-${index}-${index1}`">
                <a-typography-title :level="5" class="line-clamp-1" :id="`a-typography-title-150-${index}-${index1}`">{{
                  item1.title
                }}</a-typography-title>
                <a-typography-paragraph class="line-clamp-3 text-[#666] text-lg" :id="`a-typography-paragraph-151-${index}-${index1}`">{{
                  item1.desc
                }}</a-typography-paragraph>
              </a-flex>
            </a-flex>
          </a-typography-link>
        </a-flex>
      </a-col>
      <a-col :span="8" class="!pr-0" id="a-col-152">
        <a-typography-link href="#" class="flex flex-col" id="a-typography-link-153">
          <a-image src="https://picsum.photos/id/40/1000/800" class="aspect-[2/1]" :preview="false" id="a-image-154" />
        </a-typography-link>
      </a-col>
    </a-row>
    <a-typography-link href="#" class="flex flex-col mb-4" id="a-typography-link-155">
      <a-image src="https://picsum.photos/id/42/1000/800" class="aspect-[12/1]" :preview="false" id="a-image-156" />
    </a-typography-link>
    <a-flex justify="space-between" align="center" class="mt-6" id="a-flex-157">
      <a-typography-link href="#" class="relative !text-[#c3000b] text-2xl px-1 font-bold pb-2" id="a-typography-link-158">
        能源消费
        <a-divider class="border-4 border-[#c3000b] absolute -bottom-0.5 inset-x-0 my-0" id="a-divider-159" />
      </a-typography-link>
    </a-flex>
    <a-divider class="border-[#c3000b] my-0" id="a-divider-160" />
    <a-row class="!mx-0 my-6" :gutter="30" id="a-row-161">
      <a-col :span="8" class="!pl-0" id="a-col-162">
        <a-flex align="center" class="pl-6 relative mb-4 bg-[#eee]" justify="space-between" id="a-flex-163">
          <a-divider
            type="vertical"
            class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-full"
            id="a-divider-164"
          />
          <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" id="a-typography-link-165"> 口碑广场 </a-typography-link>
        </a-flex>
        <a-flex vertical :gap="10" class="mb-8" id="a-flex-166">
          <a-typography-link href="#" v-for="(item, index) in list14" :key="index" :id="`a-typography-link-167-${index}`">
            <a-typography-text v-if="!item.img" class="!text-[#212121] text-lg line-clamp-1" :id="`a-typography-text-168-${index}`">{{
              item.title
            }}</a-typography-text>
            <a-flex v-else :gap="20" :id="`a-flex-169-${index}`">
              <a-typography-link href="#" vertical class="w-2/5" :id="`a-typography-link-170-${index}`">
                <a-image :src="item.img" :preview="false" class="aspect-[3/2]" :id="`a-image-171-${index}`" />
              </a-typography-link>
              <a-flex vertical class="flex-1" :id="`a-flex-172-${index}`">
                <a-typography-title :level="5" class="line-clamp-1" :id="`a-typography-title-173-${index}`">{{
                  item.title
                }}</a-typography-title>
                <a-typography-paragraph class="line-clamp-3 text-[#666] text-lg" :id="`a-typography-paragraph-174-${index}`">{{
                  item.desc
                }}</a-typography-paragraph>
              </a-flex>
            </a-flex>
          </a-typography-link>
        </a-flex>
        <a-flex align="center" class="pl-6 relative mb-4 bg-[#eee]" justify="space-between" id="a-flex-175">
          <a-divider
            type="vertical"
            class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-full"
            id="a-divider-176"
          />
          <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" id="a-typography-link-177"> 低碳生活+ </a-typography-link>
        </a-flex>
        <a-typography-link href="#" class="flex flex-col relative" id="a-typography-link-178">
          <a-image src="https://picsum.photos/id/50/1000/800" :preview="false" class="aspect-[17/8]" id="a-image-179" />
          <a-typography-paragraph
            class="!mb-0 text-white text-lg absolute bottom-0 inset-x-0 line-clamp-1 pl-2"
            id="a-typography-paragraph-180"
          >
            提升生产到消费全过程“含绿量” 大力推动消费模式绿色转型
          </a-typography-paragraph>
        </a-typography-link>
      </a-col>
      <a-col :span="8" id="a-col-181">
        <a-flex vertical v-for="(item, index) in list15" :key="index" :id="`a-flex-182-${index}`">
          <a-flex align="center" class="pl-6 relative mb-2" justify="space-between" :id="`a-flex-183-${index}`">
            <a-divider
              type="vertical"
              class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-2/3"
              :id="`a-divider-184-${index}`"
            />
            <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" :id="`a-typography-link-185-${index}`">
              {{ item.title }}
            </a-typography-link>
          </a-flex>
          <a-flex vertical :gap="5" class="mb-2" :id="`a-flex-186-${index}`">
            <a-typography-link
              href="#"
              class="line-clamp-1 !text-[#333] text-lg"
              v-for="(item1, index1) in item.list"
              :key="index1"
              :id="`a-typography-link-187-${index}-${index1}`"
            >
              <a-badge color="#eaeaea" :id="`a-badge-188-${index}-${index1}`" />
              {{ item1 }}
            </a-typography-link>
          </a-flex>
        </a-flex>
      </a-col>
      <a-col :span="8" class="!pr-0" id="a-col-189">
        <a-flex align="center" class="pl-6 relative mb-2" justify="space-between" id="a-flex-190">
          <a-divider type="vertical" class="mx-0 border-4 bg-[#F33030] absolute left-0 top-1/2 -translate-y-1/2 h-2/3" id="a-divider-191" />
          <a-typography-link href="#" class="!text-[#333] text-2xl font-bold" id="a-typography-link-192"> 科技</a-typography-link>
        </a-flex>
        <a-flex vertical :gap="10" class="mb-6" id="a-flex-193">
          <a-typography-link href="#" v-for="(item, index) in list16" :key="index" :id="`a-typography-link-194-${index}`">
            <a-typography-text v-if="!item.img" class="!text-[#212121] text-lg line-clamp-1" :id="`a-typography-text-195-${index}`">{{
              item.title
            }}</a-typography-text>
            <a-flex v-else :gap="20" :id="`a-flex-196-${index}`">
              <a-typography-link href="#" vertical class="w-2/5" :id="`a-typography-link-197-${index}`">
                <a-image :src="item.img" :preview="false" class="aspect-[3/2]" :id="`a-image-198-${index}`" />
              </a-typography-link>
              <a-flex vertical class="flex-1" :id="`a-flex-199-${index}`">
                <a-typography-title :level="5" class="line-clamp-1" :id="`a-typography-title-200-${index}`">{{
                  item.title
                }}</a-typography-title>
                <a-typography-paragraph class="line-clamp-3 text-[#666] text-lg" :id="`a-typography-paragraph-201-${index}`">{{
                  item.desc
                }}</a-typography-paragraph>
              </a-flex>
            </a-flex>
          </a-typography-link>
        </a-flex>
        <a-typography-link href="#" class="flex flex-col relative" id="a-typography-link-202">
          <a-image src="https://picsum.photos/id/54/1000/800" :preview="false" class="aspect-[19/7]" id="a-image-203" />
        </a-typography-link>
      </a-col>
    </a-row>
    <a-row class="!mx-0 mb-6" :gutter="30" id="a-row-204">
      <a-col :span="16" class="!pl-0" id="a-col-205">
        <a-typography-link href="#" class="flex flex-col" id="a-typography-link-206">
          <a-image src="https://picsum.photos/id/37/1000/800" class="aspect-[10/1]" :preview="false" id="a-image-207" />
        </a-typography-link>
      </a-col>
      <a-col :span="8" class="!pr-0" id="a-col-208">
        <a-typography-link href="#" class="flex flex-col" id="a-typography-link-209">
          <a-image src="https://picsum.photos/id/38/1000/800" class="aspect-[5/1]" :preview="false" id="a-image-210" />
        </a-typography-link>
      </a-col>
    </a-row>
    <a-row class="!mx-0 mb-6" :gutter="30" v-for="(item, index) in list17" :key="index" :id="`a-row-211-${index}`">
      <a-col :span="16" class="!pl-0" :id="`a-col-212-${index}`">
        <a-flex justify="space-between" align="center" :id="`a-flex-213-${index}`">
          <a-typography-link href="#" class="relative !text-[#c3000b] text-2xl px-1 font-bold pb-2" :id="`a-typography-link-214-${index}`">
            {{ item.title }}
            <a-divider class="border-4 border-[#c3000b] absolute -bottom-0.5 inset-x-0 my-0" :id="`a-divider-215-${index}`" />
          </a-typography-link>
        </a-flex>
        <a-divider class="border-[#c3000b] my-0" :id="`a-divider-216-${index}`" />
        <a-flex :gap="30" class="mt-6" :id="`a-flex-217-${index}`">
          <a-typography-link href="#" v-for="(item1, index1) in item.list" :key="index1" :id="`a-typography-link-218-${index}-${index1}`">
            <a-image :src="item1.img" :preview="false" class="aspect-[2/1]" :id="`a-image-219-${index}-${index1}`" />
            <a-typography-paragraph
              class="!mb-0 mt-2 text-xl text-center line-clamp-1"
              :id="`a-typography-paragraph-220-${index}-${index1}`"
              >{{ item1.title }}</a-typography-paragraph
            >
          </a-typography-link>
        </a-flex>
      </a-col>
      <a-col :span="8" class="!pr-0" :id="`a-col-221-${index}`">
        <a-flex justify="space-between" align="center" :id="`a-flex-222-${index}`">
          <a-typography-link href="#" class="relative !text-[#c3000b] text-2xl px-1 font-bold pb-2" :id="`a-typography-link-223-${index}`">
            {{ item.title1 }}
            <a-divider class="border-4 border-[#c3000b] absolute -bottom-0.5 inset-x-0 my-0" :id="`a-divider-224-${index}`" />
          </a-typography-link>
        </a-flex>
        <a-divider class="border-[#c3000b] my-0" :id="`a-divider-225-${index}`" />
        <a-flex vertical :gap="10" class="mt-5" :id="`a-flex-226-${index}`">
          <a-typography-link
            href="#"
            v-for="(item1, index1) in item.list1"
            :key="index1"
            class="!text-[#212121] text-lg line-clamp-1"
            :id="`a-typography-link-227-${index}-${index1}`"
          >
            {{ item1 }}
          </a-typography-link>
        </a-flex>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
  const nTopPages = 5;
  const currentTopPage = 1;
  const list = ['《习近平经济文选》第一卷出版发行', '《习近平经济文选》第一卷主要篇目介绍', '《经济工作必须统筹好几对重要关系》'];
  const list1 = [
    '业绩失速与股权绑定争议下，优优绿能IPO闯关',
    '东方时尚徐劲松被罢免董事长 因任职期间管理混乱、战略方向不明',
    '扬州亚星客车连续两年案件信披不及时被出具警示函曾主动提出资本退市',
    '乐山商业银行APP隐私不合规被公开通报此前曾启动港股上市辅导工作',
    '操纵期货合约 渤海期货旗下公司遭证监会罚没2040万',
    '采埃孚起诉东安动力专利侵权 涉及8AT变速器',
    '正威新材更名为九鼎新材 与中车风电买卖合同纠纷一案一',
  ];
  const list2 = [
    '从各地“任务书”看决胜“十四五”',
    '五部门引导金融机构“一视同仁”对待各类所有制企业',
    '固态电池产业量产进程提速 全产业链共同推动降本提质',
    '“十四五”102项重大工程98 %以上的项目已完成规划目标',
    '外贸订单UP！巨型风电扇叶、钢制家具等加速“出海”',
    '家电回收产业迎爆发式增长 将突破2亿台',
    '“技术普惠”促进全球绿色转型',
    '山东本轮降雪为何来势汹汹？还要下多久？专家解读来了',
    '民爆行业整合进行时 产业集中度加速提升',
    '煤炭“遇冷” 四年来最低点！两大煤炭协会呼吁控制产量',
    '3月1日起，城市绿色货运、动力蓄电池维修等领域一批国家标准开始实施',
    '暴雪、寒潮、大雾，中央气象台发布多个黄色预',
  ];
  const list3 = [
    '代表委员的建议能被采纳吗？（读者点题·共同关注）',
    '从各地“任务书”看决胜“十四五”',
    '“技术普惠”促进全球绿色转型（和音） ——坚定做“赋能型大国”④',
    '为基础研究注入更多“源头活水”（创新谈）',
  ];
  const list4 = [
    '反腐败一步不停歇、半步不退让（思想纵横）',
    '深入推进党风廉政建设和反腐败斗争 以全面从严治党新成效为推进中国式现代化提供坚强保障',
    '奋力推动新时代党员教育培训高质量发展',
    '以减负新成效为实干赋能（大家谈）',
    '眼下有经济效益的水电站，为什么要关停？（干',
  ];
  const list5 = [
    'https://picsum.photos/id/18/1000/800',
    'https://picsum.photos/id/19/1000/800',
    'https://picsum.photos/id/20/1000/800',
    'https://picsum.photos/id/21/1000/800',
    'https://picsum.photos/id/22/1000/800',
    'https://picsum.photos/id/23/1000/800',
  ];
  const list6 = [
    '锚定能源高质量发展方向',
    '“十四五”102项重大工程98%以上的项目已完成规划目标',
    '锚定新质生产力代表委员“把脉开方”促发展',
    '《习近平经济文选》第一卷出版发行',
  ];
  const list7 = [
    {
      title: '能源城市',
      list: [
        {
          title: '青海首个“源网荷储”低压交直流融合示范台区投运',
        },
        {
          title: '外贸订单UP！巨型风电扇叶、钢制家具等加速“出海”',
        },
        {
          title: '近零碳排放园区推动重庆制造业整体向“绿”',
        },
        {
          title: '总投资5.3亿元 黄河“几字弯”历史遗留废弃矿山生态修复工程山西开建',
        },
        {
          title: '内蒙古赤峰：央地企合作，在大兴安岭找锡矿',
        },
      ],
    },
    {
      title: '生态环保',
      list: [
        {
          title: '《中国气候公报（2024年）》发布',
          img: 'https://picsum.photos/id/30/1000/800',
          desc: '2024年，在全球气候变暖背景下，全国平均气温10.9摄氏度，为1951年以来历史最高，全国平均降水量',
        },
        {
          title: '长三角生态绿色一体化发展示范区 明确2025年度77项重点',
        },
      ],
    },
    {
      title: '人事动态',
      list: [
        {
          title: '中国海油原党组成员、副总经理袁光宇接受审查调查',
        },
        {
          title: '王志远被开除党籍',
        },
        {
          title: '中央决定：李乐成任工信部党组书记',
        },
        {
          title: '四川能源发展集团董事长，总经理定了！',
        },
        {
          title: '李乐成任工业和信息化部党组书记',
        },
      ],
    },
    {
      title: '环球视野',
      list: [
        {
          title: '美乌矿产“万亿大单” 媒体揭秘双方考量',
        },
        {
          title: '乌克兰稀土迷局：有多少矿，哪些在采',
        },
        {
          title: '“有焦土没稀土”，美盯上的乌矿产价值大吗？',
        },
        {
          title: '美财长：目前没有与乌克兰就矿产协议进行讨论',
        },
        {
          title: '14.8万亿？乌克兰矿产家底大曝光',
        },
      ],
    },
  ];
  const list8 = ['能源之问专访', '培训'];
  const list9 = [
    {
      title: '液冷技术支撑“绿色算力”（创新故事）',
      img: 'https://picsum.photos/id/30/1000/800',
      desc: '随着新一代信息技术发展，尤其是在人工智能应用日益广泛的背景下，高功耗芯片、高密度服务器等部署量攀升，单机柜功率密度增大，对数据中心在绿色高效方面提出了更高要求。',
    },
    {
      title: '主机厂加码全固态电池竞赛 2027年量产诺言能否如期兑现？',
      img: 'https://picsum.photos/id/32/1000/800',
      desc: '2025年，比亚迪掀起“智驾平权”，催化了全行业智能化的课题。上下半场衔接过渡时，被视为2025年，比亚迪掀起“智驾平权”，催化了全行业智能化的课题。上下半场衔接过渡时，被视为',
    },
    {
      title: '工业重镇发力氢能产业（经济新方位·能源新业态）',
    },
    {
      title: '能源大变局：强制配储取消，市场驱动新时代来了',
    },
    {
      title: '“大力水手”+“深海巨人” 我国再添海上风电安装利器',
    },
    {
      title: '新能源发电全面入市，将带来这些变化→',
    },
    {
      title: '退役风机“变废为宝”，不可一味“跟风逐热”',
    },
    {
      title: '矿山无人驾驶商业化渐行渐近',
    },
  ];
  const list10 = [
    {
      title: '电网电力',
      list: ['国网北京电力积极开展电力设施保护宣传', '国网白银供电公司：“敲门行动”护航民营企业'],
    },
    {
      title: '新能源',
      list: ['固态电池产业量产进程提速 全产业链共同推动降本提质', '今年非化石能源消费占比目标提至两成左右'],
    },
    {
      title: '油气',
      list: ['国际油价势将结束月线连升势头，关税增产连环打压油市危机四伏', '900亿立方米！中俄东线天然气管道累计输气量'],
    },
    {
      title: '煤炭',
      list: ['煤炭“遇冷” 四年来最低点！两大煤炭协会呼吁控制产量', '煤炭开采加速向深部进军'],
    },
    {
      title: '核电',
      list: ['中广核广东陆丰核电项目1号机组主体工程开工', '日本岛根核电站2号机组监控设备出现故障'],
    },
  ];
  const list11 = [
    '湖北省发现全国最大铌矿',
    '全球最大产钴国暂停钴出口，钴价会就此起飞吗？',
    '刚果（金）决定暂停钴出口四个月！引爆A股钴板块',
    '推动新能源汽车产业更好发展，需提升有色金属回收水平',
    '稀土行业将迎重磅新规，影响有多大？',
  ];
  const list12 = [
    '磷酸铁锂涨价落地高压密产品成必争之地',
    '有机硅市场供需格局生变行业积蓄“上攻”动能',
    '市场景气 94家基础化工上市公司2024年业绩预喜',
    '春耕行情“催肥”化肥需求生产企业保供稳价工作稳步推进',
    '山东一化工企业要求员工不结婚就离职 律师：公司',
  ];

  const list13 = [
    {
      title: '人民ESG',
      list: [
        {
          title: '香港贸发局公布ESG指数初步数值为64.3分',
          desc: '2月24日，香港贸易发展局公布 “香港贸发局 ESG 指数” ，初步数值为64.3 分，高于 50 分的分水岭，这一结果表明，国际、中国内地及香港本地贸易商对香港在可持续发展业务上的地位表示认可。',
          img: 'https://picsum.photos/id/27/1000/800',
        },
        {
          title: '京东、美团等平台掀“社会责任风暴” 企业间ESG表现竞争或越发激烈',
        },
      ],
    },
    {
      title: '上市公司',
      list: [
        {
          title: '中国核电：拟10亿元增资参股聚变公司 布局核聚变能源领域',
        },
        {
          title: '北方稀土：控股股东包钢集团拟5亿元~10亿元增持公司股份',
        },
        {
          title: '骑士乳业2024年净利润转亏 对蒙牛乳业等大客户依赖',
        },
        {
          title: '功能性护肤成拖累 华熙生物业绩失速',
        },
        {
          title: '家庭资产规划 雪浪环境股东杨建平、许惠芬拟减持不超3%公司股份',
        },
      ],
    },
    {
      title: '能源金融',
      list: [
        {
          title: '五部门引导金融机构“一视同仁”对待各类所有制企业',
        },
        {
          title: '地方债券发行马力全开 前两个月发行规模较去年同期大幅增长',
        },
        {
          title: '安徽固镇农村商业银行因与身份不明的客户进行交易或者为客户开立匿名账户、假名账户等被罚76万元',
        },
        {
          title: '东营农村商业银行因与身份不明的客户进行交易等被罚77万元',
        },
        {
          title: '上海银行宁波分行存款业务管理不审慎被罚50万元',
        },
      ],
    },
    {
      title: '投融资·IPO',
      list: [
        {
          title: '奇瑞IPO迷局 一盘大棋？',
        },
        {
          title: '20年上市长跑终迎曙光 奇瑞港股IPO凭何突围？',
        },
        {
          title: '业绩失速与股权绑定争议下，优优绿能IPO闯关',
        },
        {
          title: '核心产品单一 增长显露疲态 济人药业IPO终止',
        },
        {
          title: '和辉光电A股上市四年累亏83亿 出口收入占37%拟赴港IPO布局海外',
        },
      ],
    },
    {
      title: '财经观察',
      list: [
        {
          title: '固态电池技术突破，光伏产业价格上行 | 投研报告',
        },
        {
          title: ' 市场交投活跃度提升，券商板块Q1业绩可期 | 投研报告',
        },
        {
          title: '硫酸、硫磺等涨幅居前，建议继续关注钛白粉板块和轮胎板块 | 投研报告',
        },
        {
          title: '国货出海方兴未艾，看好供应链及品牌全球化 | 投研报告',
        },
        {
          title: '中国ICT支出稳定增长，全球AIPC渗透加速 | 投研',
        },
      ],
    },
  ];
  const list14 = [
    {
      title: '香港贸发局公布ESG指数初步数值为64.3分',
      desc: '2月24日，香港贸易发展局公布 “香港贸发局 ESG 指数” ，初步数值为64.3 分，高于 50 分的分水岭，这一结果表明，国际、中国内地及香港本地贸易商对香港在可持续发展业务上的地位表示认可。',
      img: 'https://picsum.photos/id/45/1000/800',
    },
    {
      title: '京东、美团等平台掀“社会责任风暴” 企业间ESG表现竞争或越发激烈',
    },
    {
      title: '茅台要涨价？多位业内人士称供货价已提价约22%，高管最茅台要涨价？多位业内人士称供货价已提价约22%',
    },
  ];
  const list15 = [
    {
      title: '消费者头条',
      list: [
        '金价高位回调 趁机购入还是继续观望？',
        '卖100元游戏账号却被骗3000元 闲鱼新卖家掉入“保证金”骗局',
        '“未成年旅客滞留国外机场16小时”后续，消协：去哪儿网理应承担相应责任',
      ],
    },
    {
      title: '新品动态',
      list: [
        '新款小鹏G6内饰官图发布：这一常用功能改为手动了',
        '小米SU7 Ultra正式发布，定价52.99万元！5种颜色全公布',
        '理想i8官方图放出：对标Model X，定位纯电中大型六座SUV',
      ],
    },
    {
      title: '节能减排',
      list: [
        '家电回收产业迎爆发式增长 将突破2亿台',
        '广东省珠海市外伶仃岛用上放心电—— 一份平价电费单背后的民主实践',
        '海南三方面发力工业节能减排 降碳效果显著',
      ],
    },
    {
      title: '汽车',
      list: [
        '全国政协常委韦朝晖：新能源车等中国—东盟跨境产供链取得长足进步',
        '2025年2月蔚来公司交付新车达1.32万辆，同比增长62.2%',
        '2025年2月极氪科技集团新车销量为3.12万辆',
      ],
    },
  ];
  const list16 = [
    {
      title: ' “蛟龙号”硬核升级不停步 深海探秘更有“潜力”',
      desc: '央视网消息：“蛟龙号”是我国自主研发的7000米级载人潜水器，累计下潜超300次，作为“国之重器”，“蛟龙号”的调查范围已覆盖太平洋、印度洋和大西洋等海域。',
      img: 'https://picsum.photos/id/57/1000/800',
    },
    {
      title: '美月球着陆器“蓝色幽灵”号成功在月球着陆',
    },
    {
      title: '我国研究团队在宽禁带半导体光电探测领域取得重要进展',
    },
    {
      title: '重载货车检修基地来了“机器人工友”',
    },
    {
      title: 'DeepSeek促AI开源浪潮涌动',
    },
    {
      title: '“最老”现役火箭发射“最精”商业卫星',
    },
  ];
  const list17 = [
    {
      title: '视频',
      list: [
        {
          img: 'https://picsum.photos/id/70/1000/800',
          title: '欧盟委员会：欧盟将对贸易壁垒作出坚决且迅速的回应',
        },
        {
          img: 'https://picsum.photos/id/71/1000/800',
          title: '泰国一巴士发生翻车事故 致17人死亡超40',
        },
      ],
      title1: '企业动态',
      list1: [
        '保碧新能源董事长李文轩：让分布式光伏成为全球市场最受欢迎的资产类型',
        '吉电股份“柔控装置”改造项目入选国家重点推广低碳技术目录',
        '解码新能源黑科技！《张朝阳的物理课》走进阳光电源',
        '隆基李振国：以自主创新和中国原创技术引领光伏产业发展',
        '“灯塔工厂”全面升级，HPBC  2.0产线全面投产',
        'AI+储能，天合光能携手新加坡南洋理工大学',
      ],
    },
    {
      title: '图集',
      list: [
        {
          img: 'https://picsum.photos/id/72/1000/800',
          title: '中国成功发射四维高景一号03、04星',
        },
        {
          img: 'https://picsum.photos/id/73/1000/800',
          title: '春日铁路建设忙',
        },
      ],
      title1: '会议会展',
      list1: [
        '百人会论坛（2025）专家媒体交流会在京召开',
        '工信部：政府加强标准引领，巩固提升全球竞争优势',
        '邢翼腾：持续强化自律与创新，真正跨越行业周期',
        '“人工智能技术及其应用进展”专题边会在巴黎举行',
        '2025智能化交通与自动驾驶欲往何方',
        '第十七届消费车型盛典：遇见新模式、新市',
      ],
    },
  ];
</script>
<style></style>
